<template>
  <div class="searchingbg">
    <div class="searching-intro">
      <div class="title-head font-xbs"><span style="color: #fa7c0a;">XJTU</span>集约化搜索</div>
      <el-input placeholder="请输入关键词" class="sbar" v-model="keywords" @keyup.enter.native="doSearch" @submit.native.prevent>
        <template #append>
          <el-button :icon="Search" @click="doSearch" />
        </template>
      </el-input>
      <!-- <div class="searching-opt" v-loading="pageData.loading">
        <div v-for="(cate, key, index) in pageData.cates" class="flex">
          <div v-if="!cate.id" :class="'choices option-' + index">
            <div class="type" style="color: #f5900a;" v-if="pageData.selected[index] != -1">
              {{ cate[pageData.selected[index]].name }}
            </div>
            <div class="type" v-else>{{ key }}</div>
            <el-icon>
              <ArrowDown />
            </el-icon>
            <Simplelist :class="'opt-' + index" :arr="cate" top="20px" right="0px" :active="pageData.selected[index]"
              :id="index" :click="selectMulti" :media="key" />
          </div>
          <div class="type" :style="{ color: pageData.selected[index] != -1 ? '#f5900a' : '#000000' }"
            @click="selectSingle(index)" v-else>{{ key }}</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch, inject, type Ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import getNewsByConditon from '@/api/getNewsByConditon'
import getSecondaryTitle from '@/api/getSecondaryTitle'
import { ElMessage } from 'element-plus';
import { userinfo } from '@/stores/counter'

const user = userinfo()
const more = inject('more') as Ref<boolean>

watch(more, async () => {
  if (more.value == false) return
  await showMore()
})

const pageData = reactive({
  cates: {} as { [key: string]: any },
  selected: [] as number[],
  loading: true,
})

const { getSearchCate } = getSecondaryTitle()
const { searchContent, searchArticle, fullTextSearch} = getNewsByConditon()

const selectMulti = (id: number, index: number) => {
  // 选中第 id 的 第 index 项目
  pageData.selected[id] = index
  copeSearch(2)
}

const selectSingle = (id: number) => {
  if (pageData.selected[id] == -1) pageData.selected[id] = 0
  else pageData.selected[id] = -1
  copeSearch(2)
}

const getIds = () => {
  const keys = Object.keys(pageData.cates)
  let is_hot = false
  let ids = []
  // 寻找热门议题对应的 index
  const hot_index = keys.indexOf("热门议题")
  if (hot_index != -1) {
    if (pageData.selected[hot_index] == -1) is_hot = false
    else is_hot = true
  }
  for (let i = 0; i < pageData.selected.length; i++) {
    if (i == hot_index) continue
    if (pageData.selected[i] != -1) {
      if (pageData.cates[keys[i]].id) ids.push(pageData.cates[keys[i]].id)
      else ids.push(pageData.cates[keys[i]][pageData.selected[i]].id)
    }
  }
  return {
    is_hot, ids
  }
}

const copeSearch = async (searchWay:number) => {
  user.pages.search.page = 1
  const datas = getIds()
  let data;
  if (datas.ids.length != 0) data = await searchContent(datas.is_hot, datas.ids, keywords.value)
  else data = await searchArticle(keywords.value)
  user.pages.search.total = data.data.total
  user.pages.search.list = data.data.list
  if(searchWay==1) {
    ElMessage({
      message: `共搜索到${data.data.total}条结果`,
      type: 'success',
    })
  }
}

const showMore = async () => {
  user.pages.search.page++
  const datas = getIds()
  let data;
  if (datas.ids.length != 0) data = await searchContent(datas.is_hot, datas.ids, keywords.value)
  else data = await searchArticle(keywords.value)
  user.pages.search.total = data.data.total
  user.pages.search.list.push(...data.data.list)
  more.value = false
}

const keywords = ref('')

onMounted(async () => {
  pageData.loading = true
  pageData.cates = await reactive(getSearchCate()) as { [key: string]: any }
  const key_length = Object.keys(pageData.cates).length
  for (let i = 0; i < key_length; i++) pageData.selected.push(-1)
  pageData.loading = false
  copeSearch(2)
})


////////////////////////////////////////////////////////////////////////////////////

const doSearch = async () => {
  user.pages.search.page = 1
  const data = await fullTextSearch(keywords.value)
  console.log(data)
  // user.pages.search.total = data.data.total
  user.pages.search.list = data.data.map((item: { id: any; title: any; summary: any; coverUrl: any; author: any; categoryId: any; }) => {
    return {
        id: item.id,
        title: item.title,
        summary: item.summary,
        coverUrl: item.coverUrl,
        author: item.author,
        cateId: item.categoryId,
    };
});

}

</script>


<style scoped>
.searchingbg {
  height: 700px;
  width: 1000px;
  background-image: url(/assets/imgs/search.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

.searching-intro {
  background-color: white;
  box-shadow:
    1.2px 1.3px 2.2px rgba(0, 0, 0, 0.02),
    2.8px 3.2px 5.3px rgba(0, 0, 0, 0.028),
    5.3px 6px 10px rgba(0, 0, 0, 0.035),
    9.4px 10.7px 17.9px rgba(0, 0, 0, 0.042),
    17.5px 20.1px 33.4px rgba(0, 0, 0, 0.05),
    42px 48px 80px rgba(0, 0, 0, 0.07);
  width: 650px;
  min-height: 210px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px;
}

.title-head {
  font-size: 40px;
  font-weight: 550;
  display: flex;
  align-items: center;
}

.sbar {
  width: 60%;
  height: 40px;
  margin-top: 30px;

  border-radius: 0.8rem;
  border: 1px solid #f59009;
  overflow: hidden;

  .el-input__wrapper {
    box-shadow: none;
  }

  .el-input__wrapper.is-focus {
    box-shadow: none;
  }

  .el-input-group__append {
    box-shadow: none;
    background-color: #f59009;
    color: white;
  }
}

.el-input__wrapper:hover {
  box-shadow: none;
}

.searching-opt {
  display: flex;
  margin-top: 30px;
  border-radius: 10px;
  box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07)
}

.searching-opt>div {
  position: relative;
  padding: 20px;
  cursor: pointer;
}

.opt-0,
.opt-1,
.opt-2,
.opt-3 {
  display: none;
  cursor: pointer;
  margin-top: 20px;
}

.opt-0 {
  margin-right: 15px;
}

.opt-1 {
  margin-right: 20px;
}

.flex {
  display: flex;
}

.option-0:hover {
  .opt-0 {
    display: flex;
  }
}

.option-1:hover {
  .opt-1 {
    display: flex;
  }
}

.option-2:hover {
  .opt-2 {
    display: flex;
  }
}

.option-3:hover {
  .opt-3 {
    display: flex;
  }
}

.choices {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>